<template>
  <div class="carbon-platform">
    <!-- 固定导航导航栏 -->
    <nav class="navbar sticky-top bg-white shadow-sm py-3">
      <div class="container">
        <div class="d-flex justify-content-between align-items-center w-100">
          <!-- 网站标志 -->
          <div class="navbar-logo">
            <span class="logo-icon">🌱</span>
            <span class="logo-text">绿碳平台</span>
          </div>

          <!-- 中间导航链接 - 桌面版 -->
          <ul class="navbar-nav list-unstyled d-flex flex-row gap-3 gap-lg-5 justify-content-center flex-wrap align-items-center mb-0 fw-bold flex-grow-1 mx-4">
            <li class="nav-item">
              <a href="#" class="nav-link text-dark hover:text-primary transition-colors">首页</a>
            </li>
            <li class="nav-item">
              <a href="/shop" class="nav-link text-dark hover:text-primary transition-colors">碳积分市场</a>
            </li>
            <li class="nav-item">
              <a href="/blog" class="nav-link text-dark hover:text-primary transition-colors">博客</a>
            </li>
            <li class="nav-item">
              <a href="/contact" class="nav-link text-dark hover:text-primary transition-colors">联系我们</a>
            </li>
            <li class="nav-item">
              <a href="/about" class="nav-link text-dark hover:text-primary transition-colors">关于我们</a>
            </li>
            <li class="nav-item">
              <a href="/order" class="nav-link text-dark hover:text-primary transition-colors">我的订单</a>
            </li>
          </ul>

          <!-- 右侧功能区 - 使用emoji图标 -->
          <div class="d-flex align-items-center gap-4 gap-lg-5">
            <!-- 搜索按钮 -->
            <button class="btn p-2 text-dark hover:text-primary transition-colors" aria-label="搜索">
              <span class="fs-5">🔍</span>
            </button>

            <!-- 购物车 -->
            <a href="/cart" class="btn p-2 text-dark hover:text-primary transition-colors position-relative" aria-label="购物车">
              <span class="fs-5">🛒</span>
<!--              <span class="position-absolute top-0 right-0 btn-success text-white text-xs rounded-full h-5 w-5 flex items-center justify-center" style="border-radius: 50%;">3</span>-->
            </a>

            <!-- 用户菜单 -->
            <div class="dropdown">
              <button class="btn p-2 text-dark hover:text-primary transition-colors" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="用户菜单">
                <span class="fs-5">👤</span>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item" href="/login">登录</a></li>
                <li><a class="dropdown-item" href="/register">注册</a></li>
                <li><a class="dropdown-item" href="/account">我的账户</a></li>
              </ul>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="btn d-lg-none p-2 text-dark" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileMenu" aria-label="菜单">
              <span class="fs-5">☰</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 预留导航栏高度，防止内容被遮挡 -->
<!--    <div class="navbar-spacer"></div>-->

    <!-- Preloader -->
    <div class="preloader-wrapper" v-if="isLoading">
      <div class="preloader"></div>
    </div>

    <!-- Hero Banner -->
    <section class="hero-banner" style="background-image: url('../../public/images/banner-1.jpg');background-repeat: no-repeat;background-size: cover;">
      <div class="container-lg">
        <div class="row">
          <div class="col-lg-6 pt-5 mt-5">
            <h2 class="display-1 ls-1 text-white"><span class="fw-bold text-success">碳积分</span>买卖平台——<span class="fw-bold text-white">碳中和管家</span></h2>
            <p class="fs-4 text-white">绿色消费，低碳生活，共建可持续未来</p>
            <div class="d-flex gap-3">
              <a href="/shop" class="btn btn-success text-uppercase fs-6 rounded-pill px-4 py-3 mt-3">立即购物</a>
              <a href="/account" class="btn text-uppercase fs-6 rounded-pill px-4 py-3 mt-3"
                 style="background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%); color: white; border: none;">
                会员注册
              </a>
            </div>
            <div class="row my-5">
              <div class="col">
                <div class="row text-dark">
                  <div class="col-auto"><p class="fs-1 fw-bold lh-sm mb-0 text-white">500+</p></div>
                  <div class="col flex align-content-center text-white"><p class="lh-sm mb-0 fs-5">积分<br>品类</p></div>
                </div>
              </div>
              <div class="col">
                <div class="row text-dark">
                  <div class="col-auto text-white"><p class="fs-1 fw-bold lh-sm mb-0">10万+</p></div>
                  <div class="col flex align-content-center text-white"><p class="lh-sm mb-0 fs-5">满意<br>顾客</p></div>
                </div>
              </div>
              <div class="col">
                <div class="row text-dark">
                  <div class="col-auto text-white"><p class="fs-1 fw-bold lh-sm mb-0">50+</p></div>
                  <div class="col flex align-content-center text-white"><p class="lh-sm mb-0 fs-5">智慧<br>门店</p></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row row-cols-1 row-cols-sm-3 row-cols-lg-3 g-0 justify-content-center">
          <div class="col">
            <div class="card border-0 bg-white rounded-0 p-4 text-light">
              <div class="row">
                <div class="col-md-3 text-center">
                  <span style="font-size: 35px; ">🤖</span>
                </div>
                <div class="col-md-9">
                  <div class="card-body p-0">
                    <h5 class="text-dark">智能购物体验</h5>
                    <p class="card-text text-dark">人脸识别、智能推荐、无人结算</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card border-0 bg-white rounded-0 p-4 text-light">
              <div class="row">
                <div class="col-md-3 text-center">
                  <span style="font-size: 35px; ">⏱️</span>
                </div>
                <div class="col-md-9">
                  <div class="card-body p-0">
                    <h5 class="text-dark">30分钟极速达</h5>
                    <p class="card-text text-dark">智能仓储配送，最快30分钟送达</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card border-0 bg-white rounded-0 p-4 text-light">
              <div class="row">
                <div class="col-md-3 text-center">
                  <span style="font-size: 35px; ">📱</span>
                </div>
                <div class="col-md-9">
                  <div class="card-body p-0">
                    <h5 class="text-dark">数字化会员</h5>
                    <p class="card-text text-dark">积分通兑、个性化优惠、智能客服</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 碳排放统计概览 -->
    <section class="stats-section">
      <div class="container">
        <h2 class="section-title">全球碳排放与抵消进展</h2>

        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-value">36.3 Gt</div>
            <div class="stat-label">2022年全球碳排放量</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">1.2 Gt</div>
            <div class="stat-label">已抵消碳排放量</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">15K+</div>
            <div class="stat-label">活跃碳汇项目</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">5.3M+</div>
            <div class="stat-label">平台注册用户</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 碳积分产品展示区 -->
    <section id="products" class="products-section">
      <div class="container">
        <h2 class="section-title">热门碳积分项目</h2>

        <!-- 筛选工具栏 -->
        <div class="filter-toolbar">
          <div class="filter-categories">
            <button class="filter-btn active">全部项目</button>
            <button class="filter-btn">森林碳汇</button>
            <button class="filter-btn">可再生能源</button>
            <button class="filter-btn">甲烷回收</button>
            <button class="filter-btn">能源效率</button>
            <button class="filter-btn">社区项目</button>
          </div>

          <div class="sort-controls">
            <div class="sort-selector">
              <select class="sort-select">
                <option>推荐排序</option>
                <option>价格从低到高</option>
                <option>价格从高到低</option>
                <option>最新上线</option>
                <option>销量优先</option>
              </select>
              <span class="select-arrow">▼</span>
            </div>

            <button class="view-btn grid-view">
              <span>▦</span>
            </button>
            <button class="view-btn list-view">
              <span>☰</span>
            </button>
          </div>
        </div>

        <!-- 产品网格 -->
        <div class="products-grid">
          <!-- 产品卡片 -->
          <div v-for="product in products" :key="product.id" class="product-card">
            <div class="product-image-container">
              <img :src="product.img" :alt="product.name" class="product-image">
              <span class="product-category" :class="product.categoryClass">{{ product.category }}</span>
              <button class="product-favorite">
                <span>♡</span>
              </button>
            </div>
            <div class="product-info">
              <div class="product-rating">
                <span v-for="n in 5" :key="n" class="rating-star" :class="{ filled: n <= product.rating }">{{ n <= product.rating ? '★' : '☆' }}</span>
                <span class="review-count">({{ product.reviews }})</span>
              </div>
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-description">{{ product.description }}</p>
              <div class="product-price-container">
                <div class="product-price">
                  <span class="current-price">¥{{ product.price }}</span>
                  <span class="original-price">¥{{ product.originalPrice }}</span>
                  <span class="discount-badge">20% off</span>
                </div>
                <button class="add-to-cart-btn" @click="addToCart(product)">
                  <span>🛒</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 加载更多 -->
        <div class="load-more-container">
          <a href="/shop" class="load-more-btn" style="text-decoration: none;">
            加载更多项目 <span class="load-more-arrow">▼</span>
          </a>
        </div>
      </div>
    </section>

    <!-- 为什么选择我们 -->
    <section class="features-section">
      <div class="container">
        <h2 class="section-title">为什么选择绿碳平台</h2>

        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <span>✓</span>
            </div>
            <h3 class="feature-title">权威认证项目</h3>
            <p class="feature-description">所有碳积分项目均通过国际权威机构认证，确保减排效果真实可信。</p>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <span>🌎</span>
            </div>
            <h3 class="feature-title">全球项目覆盖</h3>
            <p class="feature-description">来自全球各地的优质碳汇项目，让您的每一笔投资都能产生全球影响。</p>
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <span>📈</span>
            </div>
            <h3 class="feature-title">透明追踪系统</h3>
            <p class="feature-description">区块链技术全程追踪碳积分流向，确保每一笔交易公开透明可追溯。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 用户评价 -->
    <section class="testimonials-section">
      <div class="container">
        <h2 class="section-title">用户的真实反馈</h2>

        <div class="testimonials-grid">
          <div class="testimonial-card">
            <div class="testimonial-rating">
              <span>★★★★★</span>
            </div>
            <p class="testimonial-text">"通过绿碳平台购买碳积分，不仅帮助我的企业实现了碳中和目标，还能看到资金实际支持的环保项目，非常透明可信。"</p>
            <div class="testimonial-author">
              <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="author-avatar">
              <div class="author-info">
                <div class="author-name">张先生</div>
                <div class="author-title">某科技公司 CEO</div>
              </div>
            </div>
          </div>

          <div class="testimonial-card">
            <div class="testimonial-rating">
              <span>★★★★☆</span>
            </div>
            <p class="testimonial-text">"作为一个环保爱好者，我每月都会购买一些碳积分来抵消我的日常生活排放。平台界面友好，操作简单，推荐给大家！"</p>
            <div class="testimonial-author">
              <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="author-avatar">
              <div class="author-info">
                <div class="author-name">李女士</div>
                <div class="author-title">环保志愿者</div>
              </div>
            </div>
          </div>

          <div class="testimonial-card">
            <div class="testimonial-rating">
              <span>★★★★★</span>
            </div>
            <p class="testimonial-text">"我们公司通过绿碳平台完成了年度碳中和计划，整个过程专业且高效，平台提供的碳中和报告也得到了合作伙伴的高度认可。"</p>
            <div class="testimonial-author">
              <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="author-avatar">
              <div class="author-info">
                <div class="author-name">王先生</div>
                <div class="author-title">某制造企业 可持续发展总监</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚部分 -->
    <footer class="main-footer">
      <div class="container">
        <div class="footer-bottom">
          <p class="copyright">© 2025 绿碳平台 版权所有 | 京ICP备12345678号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'CarbonPlatformIndex',
  setup() {
    // 状态管理
    const isLoading = ref(true);
    const cartItems = ref([]);
    const cartCount = ref(2);

    // 产品数据
    const products = ref([
      {
        id: 1,
        name: '亚马逊森林保护项目',
        description: '保护亚马逊雨林，防止乱砍滥伐，每购买1吨碳积分可保护0.5公顷森林。',
        price: 68,
        originalPrice: 85,
        img: 'https://picsum.photos/seed/forest1/400/250',
        category: '森林碳汇',
        categoryClass: 'category-forest',
        rating: 4.5,
        reviews: 128
      },
      {
        id: 2,
        name: '内蒙古太阳能发电场项目',
        description: '建设大型太阳能发电场，替代传统火电，减少碳排放。',
        price: 56,
        originalPrice: 70,
        img: 'https://picsum.photos/seed/solar/400/250',
        category: '可再生能源',
        categoryClass: 'category-energy',
        rating: 4,
        reviews: 95
      },
      {
        id: 3,
        name: '海上风力发电项目',
        description: '沿海地区风力发电场建设，提供清洁电力，减少煤炭使用。',
        price: 62,
        originalPrice: 77,
        img: 'https://picsum.photos/seed/wind/400/250',
        category: '可再生能源',
        categoryClass: 'category-energy',
        rating: 5,
        reviews: 210
      },
      {
        id: 4,
        name: '农业废弃物沼气项目',
        description: '利用农业废弃物生产沼气，替代化石燃料，减少甲烷排放。',
        price: 48,
        originalPrice: 60,
        img: 'https://picsum.photos/seed/biogas/400/250',
        category: '甲烷回收',
        categoryClass: 'category-methane',
        rating: 3.5,
        reviews: 76
      },
      {
        id: 5,
        name: '黄土高原植树造林项目',
        description: '在黄土高原地区大规模植树造林，改善生态环境，吸收二氧化碳。',
        price: 53,
        originalPrice: 66,
        img: 'https://picsum.photos/seed/reforestation/400/250',
        category: '森林碳汇',
        categoryClass: 'category-forest',
        rating: 4,
        reviews: 156
      },
      {
        id: 6,
        name: '建筑节能改造项目',
        description: '对老旧建筑进行节能改造，安装太阳能板和高效保温材料。',
        price: 59,
        originalPrice: 73,
        img: 'https://picsum.photos/seed/efficiency/400/250',
        category: '能源效率',
        categoryClass: 'category-efficiency',
        rating: 4.5,
        reviews: 89
      },
      {
        id: 7,
        name: '城市社区垃圾分类项目',
        description: '推广社区垃圾分类和回收系统，减少填埋和焚烧产生的碳排放。',
        price: 45,
        originalPrice: 56,
        img: 'https://picsum.photos/seed/community/400/250',
        category: '社区项目',
        categoryClass: 'category-community',
        rating: 3,
        reviews: 42
      },
      {
        id: 8,
        name: '小型水电站建设项目',
        description: '在山区建设生态友好型小型水电站，提供清洁能源。',
        price: 65,
        originalPrice: 81,
        img: 'https://picsum.photos/seed/hydro/400/250',
        category: '可再生能源',
        categoryClass: 'category-energy',
        rating: 4,
        reviews: 103
      }
    ]);

    // 用户碳账户数据
    const userData = ref({
      points: 1250,
      carbonReduced: 1250,
      carbonNeutralProgress: 38
    });

    // 近期交易记录
    const recentTransactions = ref([
      {
        id: 1,
        type: 'earn',
        description: '使用公共交通出行',
        points: 50,
        date: '2023-11-15'
      },
      {
        id: 2,
        type: 'earn',
        description: '购买环保认证商品',
        points: 120,
        date: '2023-11-10'
      },
      {
        id: 3,
        type: 'spend',
        description: '兑换太阳能充电宝',
        points: 500,
        date: '2023-11-05'
      },
      {
        id: 4,
        type: 'earn',
        description: '参与植树活动',
        points: 200,
        date: '2023-10-28'
      }
    ]);

    // 方法
    const addToCart = (product) => {
      // 检查商品是否已在购物车中
      const existingItem = cartItems.value.find(item => item.id === product.id);

      if (existingItem) {
        existingItem.quantity++;
      } else {
        cartItems.value.push({
          ...product,
          quantity: 1
        });
      }

      cartCount.value = cartItems.value.reduce((total, item) => total + item.quantity, 0);
      alert(`已将 ${product.name} 加入购物车`);
    };

    const removeItem = (productId) => {
      const index = cartItems.value.findIndex(item => item.id === productId);
      if (index !== -1) {
        cartItems.value.splice(index, 1);
        cartCount.value = cartItems.value.reduce((total, item) => total + item.quantity, 0);
      }
    };

    const checkout = () => {
      alert('跳转到结算页面');
      // 实际项目中应该使用路由跳转
      // this.$router.push('/checkout');
    };

    // 计算购物车小计
    const cartSubtotal = () => {
      return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0).toFixed(2);
    };

    // 计算购物车总计
    const cartTotal = () => {
      const subtotal = parseFloat(cartSubtotal());
      const shipping = subtotal >= 99 ? 0 : 10;
      return (subtotal + shipping).toFixed(2);
    };

    // 初始化
    onMounted(() => {
      // 模拟页面加载
      setTimeout(() => {
        isLoading.value = false;
      }, 800);
    });

    return {
      isLoading,
      cartItems,
      cartCount,
      products,
      userData,
      recentTransactions,
      addToCart,
      removeItem,
      checkout,
      cartSubtotal,
      cartTotal
    };
  }
};
</script>

<style>
/* 添加导航栏样式 */
.navbar {
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 15px 0;
  z-index: 1030; /* 确保导航栏在其他内容之上 */
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color);
}

.logo-icon {
  font-size: 28px;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--bs-success);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.dropdown-item {
  padding: 8px 15px;
  color: var(--text-dark);
  transition: var(--transition);
}

.dropdown-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

/* 预留导航栏高度，防止内容被遮挡 */
.navbar-spacer {
  height: 70px;
}

/* 基础样式重置与全局设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.container, .container-lg {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 颜色变量定义 - 保持与hero banner一致的绿色主题 */
:root {
  --primary-color: #2E7D32; /* 主绿色 - 与hero banner中的success颜色匹配 */
  --primary-light: rgba(46, 125, 50, 0.1);
  --secondary-color: #0288D1; /* 辅助蓝色 */
  --accent-color: #FFC107; /* 强调黄色 */
  --neutral-light: #F5F5F5;
  --neutral-color: #E0E0E0;
  --text-dark: #424242;
  --text-medium: #757575;
  --text-light: #BDBDBD;
  --white: #FFFFFF;
  --red: #F44336;
  --red-light: #FFEBEE;
  --purple: #9C27B0;
  --blue: #2196F3;
  --green: #4CAF50;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --transition: all 0.3s ease;
}

/* 通用组件样式 */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 16px;
  transition: var(--transition);
  text-align: center;
  border: none;
}

.btn-success {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn-success:hover {
  background-color: #1B5E20;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 40px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-medium);
  max-width: 700px;
  margin: 0 auto;
}

/* 预加载器样式 */
.preloader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.preloader {
  width: 50px;
  height: 50px;
  border: 5px solid var(--neutral-light);
  border-top: 5px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 碳排放统计概览样式 */
.stats-section {
  padding: 60px 0;
  background-color: var(--white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background-color: var(--neutral-light);
  border-radius: var(--radius-lg);
  padding: 25px;
  text-align: center;
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.stat-card:nth-child(2) .stat-value {
  color: var(--secondary-color);
}

.stat-card:nth-child(3) .stat-value {
  color: var(--accent-color);
}

.stat-card:nth-child(4) .stat-value {
  color: var(--green);
}

.stat-label {
  color: var(--text-dark);
}

/* 产品展示区样式 */
.products-section {
  padding: 60px 0;
  background-color: var(--neutral-light);
}

.filter-toolbar {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 15px 20px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.filter-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 14px;
  transition: var(--transition);
  background-color: var(--neutral-light);
  color: var(--text-dark);
}

.filter-btn.active {
  background-color: var(--primary-color);
  color: var(--white);
}

.filter-btn:hover:not(.active) {
  background-color: var(--neutral-color);
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-selector {
  position: relative;
}

.sort-select {
  padding: 6px 30px 6px 16px;
  border-radius: var(--radius-full);
  font-size: 14px;
  border: none;
  background-color: var(--neutral-light);
  appearance: none;
  cursor: pointer;
}

.select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-medium);
}

.view-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--neutral-light);
  transition: var(--transition);
}

.view-btn:hover {
  background-color: var(--neutral-color);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.product-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.product-image-container {
  position: relative;
}

.product-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.product-category {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  color: var(--white);
  font-weight: 500;
}

.product-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--white);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-medium);
}

.product-favorite:hover {
  opacity: 1;
  color: var(--red);
}

.product-info {
  padding: 20px;
}

.product-rating {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-medium);
}

.rating-star {
  color: var(--text-light);
}

.rating-star.filled {
  color: var(--accent-color);
}

.review-count {
  margin-left: 5px;
  font-size: 12px;
}

.product-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.product-description {
  font-size: 14px;
  color: var(--text-medium);
  margin-bottom: 15px;
  line-height: 1.5;
}

.product-price-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.current-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
}

.original-price {
  font-size: 14px;
  color: var(--text-light);
  text-decoration: line-through;
}

.discount-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: var(--red-light);
  color: var(--red);
}

.add-to-cart-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.add-to-cart-btn:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.load-more-container {
  text-align: center;
  margin-top: 20px;
}

.load-more-btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  background-color: var(--white);
  color: var(--primary-color);
  font-weight: 600;
  transition: var(--transition);
  border: 1px solid var(--primary-color);
}

.load-more-btn:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.load-more-arrow {
  margin-left: 5px;
  font-size: 12px;
}

/* 为什么选择我们样式 */
.features-section {
  padding: 60px 0;
  background-color: var(--white);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature-card {
  background-color: var(--neutral-light);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 20px;
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text-dark);
}

.feature-description {
  color: var(--text-medium);
  line-height: 1.6;
}

/* 用户评价样式 */
.testimonials-section {
  padding: 60px 0;
  background-color: var(--neutral-light);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.testimonial-card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.testimonial-rating {
  color: var(--accent-color);
  font-size: 18px;
  margin-bottom: 15px;
}

.testimonial-text {
  color: var(--text-dark);
  line-height: 1.6;
  margin-bottom: 25px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.author-info {
  text-align: left;
}

.author-name {
  font-weight: 600;
  color: var(--text-dark);
}

.author-title {
  font-size: 14px;
  color: var(--text-medium);
}

/* 页脚样式 */
.main-footer {
  background-color: #2E7D32;
  color: var(--white);
  padding: 60px 0 30px;
}


.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--text-light);
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}


.footer-contact li {
  margin-bottom: 15px;
  color: var(--text-light);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact li:before {
  content: '•';
  color: var(--primary-color);
}

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid,
  .testimonials-grid,
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 576px) {
  .stats-grid,
  .features-grid,
  .testimonials-grid,
  .footer-content {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: 24px;
  }

  .navbar-nav {
    margin-top: 15px;
    width: 100%;
  }
}
</style>
